<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>美食博客</title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- //Meta tag Keywords -->

	<!-- Custom-Files -->
	<link rel="stylesheet" href="/css/bootstrap.css">
	<!-- Bootstrap-CSS -->
	<link rel="stylesheet" href="/css/style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link href="/css/font-awesome.min.css" rel="stylesheet">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //Custom-Files -->

	<!-- Fonts -->
	<link href="/css/google_fonts_poppins.css" rel="stylesheet">
	<link href="/css/google_fonts_hind.css" rel="stylesheet">
	<!-- //Fonts -->
	<style>
		#thumbs-up {
			color: #999;
			font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif !important;
			outline: none;
			text-decoration: none;
			margin: 0;
			padding: 0;
			-webkit-box-sizing: border-box;
			background: transparent;
			word-break: break-all;
			list-style: none;
			text-align: -webkit-match-parent;
			box-sizing: border-box;
			margin-right: 20px;
		}
		svg {
			width: 30px;
			height: 30px;
			display: inline-block;
			text-align: center;
			vertical-align: -5px;
			fill: #6b6b6b;
		}
		.num {
			width: 30px;
			height: 30px;
			color: #349edf;
			line-height: 24px;
			list-style: none;
			font-size: 25px;
		}
	</style>
</head>

<body>
	<div class="main-top" id="home">
		<header>
			<div class="container-fluid">
				<div class="header d-md-flex justify-content-between align-items-center py-3 pl-2">
					<!-- logo -->
					<div id="logo">
						<h1><a href="/">FoodBlog</a></h1>
					</div>
					<!-- //logo -->
					<!-- nav -->
					<div class="nav_w3ls">
						<nav>
							<label for="drop" class="toggle">Menu</label>
							<input type="checkbox" id="drop" />
							<ul class="menu">
								<li><a th:href="@{'/blog/' + ${userName}}" target="_self" class="nav-button nav-style" th:text="${userName}">用户名</a></li>
								<li><a href="javascript:void(0);" target="_self" class="nav-button nav-style" onclick="unLogin()">注销</a></li>
							</ul>
						</nav>
					</div>
					<!-- //nav -->
				</div>
			</div>
		</header>

		<!-- banner -->
		<div class="banner_w3lspvt-2">
			<div class="container">
				<div class="d-flex style-w3layouts">
					<h4 class="inner-style-w3pvts mr-auto text-wh text-uppercase">Standard</h4>
					<ol class="breadcrumb">
						<li class="breadcrumb-item"><a href="/">首页</a></li>
						<li class="breadcrumb-item" aria-current="page">Blog</li>
					</ol>
				</div>
			</div>
		</div>
		<!-- //banner -->
	</div>
	<!-- //main banner -->

	<!-- blog -->
	<section class="wthree-row py-5">
		<div class="container py-xl-5 py-lg-3">
			<a href="/add/blog" target="_self" class="nav-button nav-style" style="font-size: 20px;">+发布博客</a>
			<div class="blog-left-content" id="blogs">
				<!-- 一篇博客开始 -->
				<div class="creatives-grid" v-for="(blog, i) in blogs">
					<div>
						<img v-bind:src="blog.img" alt="" class="img-fluid" />
					</div>
					<div class="p-mask img-thumbnail">
						<h4>
							<a href="javascript:void(0);">{{blog.title}}</a>
							<a href="javascript:void(0);">  -- by </a>
							<a v-bind:href="'/blog/' + blog.userName" target="_self">{{blog.userName}}</a>
						</h4>
						<span class="let mt-3">{{blog.publishTime}}</span>
						<hr>
						<p>{{blog.content}}</p>
						<!-- 点赞、评论 -->
						<div class="mt-4">
							<div class="input-group mb-3">
								<a id="thumbs-up" href="javascript:void(0);" v-on:click.once="addlikes(i, blog.id)">
									<span class="text">
										<svg t="1568705992128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17031" width="200" height="200">
											<path d="M724.928 976.384H339.712a143.04 143.04 0 0 1-141.888-131.008L165.76 444.544a141.44 141.44 0 0 1 33.536-103.616 141.696 141.696 0 0 1 108.288-50.048h39.296c129.856 0 164.16-107.392 164.16-164.224C511.04 63.552 560.832 16 626.944 16c44.992 0 87.296 22.4 113.152 59.904 29.76 43.072 48.576 120.896 20.992 214.976h88.256a142.528 142.528 0 0 1 140.544 164.992l-54.656 341.056a211.968 211.968 0 0 1-210.304 179.456z m-417.28-589.504c-16 1.152-27.264 6.848-35.264 16.32a46.208 46.208 0 0 0-10.944 33.728l32.064 400.832c1.92 23.872 22.208 42.624 46.208 42.624h385.216a116.48 116.48 0 0 0 115.584-98.56l54.656-341.312a46.4 46.4 0 0 0-45.76-53.632h-159.168a48.128 48.128 0 0 1-42.752-69.952c48.064-93.44 29.952-162.88 13.632-186.56a41.92 41.92 0 0 0-34.112-18.368c-13.184 0-19.904 4.928-19.904 14.656C607.104 256 517.76 386.88 346.944 386.88h-39.296zM111.104 976.384a48.064 48.064 0 0 1-47.808-44.16l-47.168-589.44a48 48 0 0 1 44.032-51.712 48.512 48.512 0 0 1 51.648 44.032l47.168 589.44a48.064 48.064 0 0 1-44.032 51.712l-3.84 0.128z" fill="" p-id="17032"></path>
										</svg>
									</span>
									<span class="num">{{blog.likes}}</span>
								</a>
								<input type="text" class="form-control" placeholder="发条友善的评论" aria-label="发条友善的评论" aria-describedby="button-addon2" v-model="newComments[i]">
								<div class="input-group-append">
									<button class="btn btn-outline-secondary" type="button" id="button-addon2" v-on:click="addComment(i, blog.id)">发表评论</button>
								</div>
							</div>
						</div>
						<!-- 已有的评论 -->
						<div v-for="comment in blog.comments">
							<hr>
							<p>{{comment.content}}</p>
						</div>
					</div>
				</div>
				<!-- //一篇博客结束 -->
				<!--
				<nav aria-label="Page navigation example">
					<ul class="pagination float-left mt-5">
						<li class="page-item">
							<a class="page-link" href="blog1.html">1</a>
						</li>
						<li class="page-item">
							<a class="page-link" href="blog2.html">2</a>
						</li>
					</ul>
				</nav>
				-->
			</div>
		</div>
	</section>
	<!-- //blog -->

	<!-- footer -->
	<footer>
		<div class="w3ls-footer-grids py-4">
			<div class="container-fluid py-lg-3">
				<div class="d-md-flex">
					<div class="col-md-4 w3l-footer-logo">
						<!-- logo 2 -->
						<h2>
							<a class="logo-2" href="/">FoodBlog</a>
						</h2>
						<!-- //logo 2 -->
					</div>
					<div class="col-md-8 w3l-footer text-md-right text-center mt-3">
						<ul class="list-unstyled footer-nav-wthree">
							<li>
								<a href="/">首页</a>
							</li>
							<li>
								<a href="#">关于我们</a>
							</li>
							<li>
								<p class="btn-footer">&copy; 2020-2021</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<!-- //footer -->
	<!-- copyright bottom -->

	<!-- //copyright bottom -->
	<!-- move top icon -->
	<a href="#home" class="move-top text-center">
		<span class="fa fa-upload" aria-hidden="true"></span>
	</a>
	<!-- //move top icon -->

	<!-- Vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<!-- 自己写的 -->
	<script src="/js/unlogin.js"></script>
	<script>
		var thumbs = new Vue({
			el: "#blogs",
			data: {
				blogs: [			// 所有博客
				],
				newComments: [		// 新增评论
				]
			},
			methods: {
				getBlogs: function() {
					// 获取所有博客
					var that = this
					axios({
						method: "GET",
						url: "/api/blog/blogs"
					})
					.then(function(response) {
						var data = response.data;
						data.blogs.forEach(blog => {
							that.newComments.push("");
							if (blog.img === null)
								blog.img = ""
						});
						that.blogs = data.blogs;
						// 获取评论
						that.blogs.forEach(blog => {
							axios({
								method: "GET",
								url: "/api/comment/comments/" + blog.id
							})
							.then(function(response) {
								Vue.set(blog, "comments", response.data.comments);
							})
							.catch(function(error) {
								console.log(error);
							});
						});
					})
					.catch(function(error) {
						console.log(error);
					});
				},
				addlikes: function(i, blogId) {
					// 点赞
					var that = this
					axios({
						method: "PUT",
						url: "/api/blog/add/likes/" + blogId
					})
					.then(function(response) {
						that.blogs[i].likes ++;
					})
					.catch(function(error) {
						console.log(error);
					});
				},
				addComment: function(i, blogId) {
					// 发表评论
					if (this.newComments[i] != "")
					{
						var that = this;
						axios({
							method: "POST",
							url: "/api/comment/add",
							data: {
								"content": that.newComments[i],
								"blogId": blogId
							}
						})
						.then(function(response) {
							that.newComments[i] = "";
							that.blogs[i].comments.unshift(response.data.comments[0]);
						})
						.catch(function(error) {
							console.log(error)
						});
					}
				}
			},
			mounted: function() {
				this.getBlogs();
			}
		});
	</script>
</body>

</html>
